<template>
  <div class="xieyi">
    <van-nav-bar
      fixed
      safe-area-inset-top
      title="服务协议"
      left-text="返回"
      left-arrow
      @click-left="$router.push({ name: 'personal' })"
    />
    <div class="xieyi-content">
      <h3>
        欢迎使用脚本精灵，使用之前请认真阅读以下协议，一旦使用本软件默认遵守以下协议。
      </h3>
      <p>
        1.使用本软件涉及到互联网服务，可能会受到各个环节
        不稳定因素的影响，存在因不可抗力、计算机病毒、黑
        客攻击、系统不稳定、非法内容信息、骚扰信息屏蔽以
        及其他任何网络、技术、通信线路、信息安全管理措施
        等原因造成的用户的经济损失，本人及合作单位不承 担任何责任。
      </p>
      <p>
        2.使用本软件由用户自己承担风险，本人及合作单位对
        本软件不作任何类型的担保，不论是明示的、默示的或
        法令的保证和条件,包括但不限于本软件的适销性、适
        用性、无疏忽或无技术瑕疵问题、所有权和无侵权的明
        示或默示担保和条件,对在任何情况下因使用或不能
        使用本“软件”所产生的直接、间接、偶然、特殊及后续
        的损害及风险，本人及合作单位不承担任何责任。
      </p>
      <p>
        3.不得利用本软件及服务制作、复制、发布、传播侵犯
        其他用户或第三方合法权益的内容,包括但不限于:发
        布、传送、传播、储存违反国家法律法规禁止的内容。 同意并遵守以上协议
      </p>
      <van-checkbox square v-model="agreeAgreement" label-disabled>同意协议，开始使用</van-checkbox>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Checkbox, NavBar } from "vant";
Vue.use(Checkbox);
Vue.use(NavBar);

export default {
  name: "AgreementPage",
  data() {
    return {
      checked: false,
    };
  },
  computed: {
    agreeAgreement: {
      get() {
        return this.$store.state.agreeAgreement;
      },
      set() {
        this.$store.commit("SET_TOTLE_DATA", { agreeAgreement: !this.agreeAgreement });
      },
    },
  }
};
</script>

<style lang="scss" scoped>
.xieyi {
  padding-bottom: 50px;
  &-content {
    margin: 56px 10px 0;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 12px #ebedf0;
    h3 {
      margin: 10px 0;
    }
    p {
      font-size: 12px;
      line-height: 28px;
    }
  }
}
</style>
